<template>
	<view class="container bg-grey u-skeleton u-padding-bottom-0">
		<view class="page-body-tab">
			<view class="flex c-w j-s padh20 a-c" style="height: 100rpx; background: #080808">
				<view class="bold">购物车</view>
				<view v-show="cartList.length" @click="isEditor = !isEditor" class="bold flex a-c">
					<u-icon name="edit-pen"></u-icon>
					<view class="padh10">{{ isEditor ? "Confirm" : "Edit" }}</view>
				</view>
			</view>
			<view v-if="cartList.length">
				<view class="bg-white marv20 shadow-line radius10" v-for="(item, index) in cartList" :key="item.id">
					<view class="bg-white flex padh20 j-s" @click="toGoodsdetail(item)">
						<view class="flex j-c flex-col">
							<view v-if="!item.selected" class="wait-circle" @click.native.stop="item.selected = true">
							</view>
							<u-icon v-else name="checkmark-circle-fill" color="#ff0000" size="35"
								@click.native.stop="item.selected = false" />
						</view>
						<view class="flex padv30 flex1" style="margin-left: 30rpx">
							<view class="">
								<u-image :src="item.sku.goods.cover" width="150rpx" height="150rpx"
									border-radius="10rpx" />
							</view>
							<view class="flex-col j-s flex flex1" style="margin-left: 20rpx">
								<view class="flex1">
									<view class="font28 u-line-2">
										{{ item.sku.goods.name }}
									</view>
								</view>
								<view class="marv10">
									<span
										class="sku-spec padh20 font24">{{ item.sku.skuSpec | formatSkupec(item.sku.skuSpec) }}
										<!-- <u-icon name="arrow-down" class="u-m-l-10"></u-icon> -->
									</span>
								</view>
								<view class="flex">
									<view class=""> </view>
									<view class="flex j-s flex1">
										<view class="flex a-e" style="color: red">￥
											{{ item.sku.salePrice }}
										</view>
										<view class="">
											<u-number-box v-model="item.count"
												@change="item.price = item.sku.salePrice * item.count" :min="1">
											</u-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<u-empty class="car-empty" v-else text="空空如也" mode="car"></u-empty>
			<view class="hotlist-content">
				<view class="flex flex-col j-s-c marv20">
					<view class="font32 pad10 c-m bold">推荐</view>
				</view>

				<view>
					<u-waterfall v-model="hotList" ref="uWaterfall" class="marv15 radius10">
						<template v-slot:left="{ leftList }">
							<view class="demo-warter" v-for="(item, index) in leftList" :key="index">
								<navigator :url="`../../goods/detail?id=${item.id}`">
									<u-lazy-load height="200" img-mode="scaleToFill" threshold="-450" border-radius="10"
										:image="item.cover" :index="index"></u-lazy-load>
									<view class="demo-title u-line-2">{{ item.name }}</view>
									<view class="demo-price">
										<sb-price-text class="padv5" :price="item.minPrice" sub
											:oldPrice="item.originalPrice" />
									</view>
								</navigator>
							</view>
						</template>
						<template v-slot:right="{ rightList }">
							<view class="demo-warter" v-for="(item, index) in rightList" :key="index">
								<navigator :url="`../../goods/detail?id=${item.id}`">
									<u-lazy-load height="200" img-mode="scaleToFill" threshold="-450" border-radius="10"
										:image="item.cover" :index="index"></u-lazy-load>
									<view class="demo-title u-line-2">{{ item.name }}</view>
									<view class="demo-price">
										<sb-price-text class="padv5" :price="item.minPrice" sub
											:oldPrice="item.originalPrice" />
									</view>
								</navigator>
							</view>
						</template>
					</u-waterfall>
				</view>
			</view>
			<view style="height: 100rpx"> </view>
			<view v-if="cartList.length" class="footer bg-white flex padh30 j-s a-c">
				<view class="flex a-c">
					<view class="flex">
						<view class="">
							<u-icon @click="handSelectedAll" color="#c03" :name="
                  isSelectedAll ? 'checkmark-circle-fill' : 'checkmark-circle'
                " size="36"></u-icon>
						</view>
					</view>
					<view class="flex flex-col j-c pad10 bold"> Check All </view>
				</view>
				<view class="flex">
					<view v-if="!isEditor" class="flex j-c a-c padh20">
						<span class="font30"> Total： </span>
						<span class="font30" style="color: #ff0033">
							￥{{ totalPrice }}
						</span>
					</view>
					<view v-if="isEditor" class="circle flex j-c marh10 padh20 c-w a-c" @click="delCart">
						删除
					</view>
					<view v-else class="circle flex j-c marh10 padh20 c-w a-c"
						:style="{background:cartList.filter((item) => item.selected).length?'#ff0033':'#ccc'}"
						@click="pay">
						Buy Now
					</view>
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
	import { mapMutations } from "vuex";
	import { RECOMMEND_TYPE } from '@/config/enum'
	export default {
		data() {
			return {
				cartList: [],
				disabled: false,
				btnWidth: 180,
				show: false,
				loading: false,
				isEditor: false,
				hotList: [],
				pageIndex: 1
			};
		},
		onLoad() {
			if (!this.$checkLogin()) return this.$redirect2Login();
		},
		onShow() {
			this.getCartlist();
			this.getHotList();
		},
		onPullDownRefresh() {
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 500);
			this.getCartlist();
		},
		filters: {
			formatSkupec(skuPec) {
				return skuPec.map((s) => s.specValue).join(",");
			},
		},
		computed: {
			isSelectedAll() {
				// 计算属性,当每一个都被全选时
				return this.cartList.every((r) => r.selected);
			},
			totalPrice() {
				return this.cartList
					.filter((r) => r.selected)
					.reduce((total, item) => {
						total += item.count * Number(item.sku.salePrice);
						return total;
					}, 0);
			},
		},

		methods: {
			...mapMutations(["SET_ORDER_INFO"]),
			async getHotList() {
				let { success, data: { rows } } = await this.$get("/recommend/list", {
					pageIndex: this.pageIndex,
					pageSize: 6,
					type: RECOMMEND_TYPE.CART
				}, false);
				if (!success) return;
				this.hotList = rows;
			},
			async getCartlist() {
				const params = {
					pageIndex: 1,
					pageSize: 100,
				};
				let { success, data } = await this.$get("/cart/list", params);
				if (success)
					this.cartList = data.rows
					.filter((d) => d.sku?.goods)
					.map((i) => {
						i.selected = false;
						i.price = i.sku.salePrice * i.count;
						return i;
					});
			},
			handSelectedAll() {
				if (this.isSelectedAll) {
					this.cartList.forEach((r) => (r.selected = false));
				} else {
					this.cartList.forEach((r) => (r.selected = true));
				}
			},
			pay() {
				const selectedCartlist = this.cartList.filter((item) => item.selected);
				if (!selectedCartlist.length) {
					this.$msg("You have not selected the item！");
					return;
				}
				console.log(selectedCartlist);
				this.SET_ORDER_INFO(
					selectedCartlist.map((g) => {
						const flatSpec = g.sku.skuSpec.map((gg) => gg.specValue);
						return { ...g, skuSpec: [...flatSpec].join(","), fromCart: true };
					})
				);
				uni.navigateTo({
					url: "../../order/detail",
				});
			},
			async delCart() {
				const params = {
					id: this.cartList.filter((item) => item.selected).map((i) => i.id),
				};
				let { success, data } = await this.$postB("/cart/del", params);
				this.getCartlist();
			},
			toGoodsdetail(item) {
				this.$go2(`/pages/main/goods/detail?id=${item.sku.goodsId}`);
				console.log(item);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		/deep/ {
			.u-tabbar__content {
				position: absolute;
			}
		}
	}

	.header {
		width: 100%;
		/* height: 152rpx; */
		/* position: fixed; */
		top: 0;
		background: #f1f1f1;
	}

	.footer {
		width: 100%;
		height: 100rpx;
		position: absolute;
		bottom: 100rpx;
		left: 0;
		z-index: 100;

		.circle {
			height: 60rpx;
			text-align: center;
			border-radius: 30rpx;
			background-color: #ff0033;
		}
	}

	.wait-circle {
		width: 35rpx;
		height: 35rpx;
		border-radius: 50%;
		border: 4rpx solid #ccc;
	}

	.sku-spec {
		border-radius: 16rpx;
		background: #ccc;
	}

	.car-empty {
		height: 300rpx;
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 8px;
		position: relative;
	}
</style>
